<template>
	<view class="details">
		<u-navbar :fixed='false'>
			<view slot='left'>
				<view class='left-arrow'>
					<image src="../../static/list/back.png" mode=""></image>
				</view>
			</view>
			<view slot='right'>
				<view class='right-content'>
					<image src='../../static/list/star.png' class='title-start'></image>
					<image src='../../static/list/search.png' class='title-start'></image>
					<image src='../../static/list/cart.png'></image>
				</view>
			</view>
		</u-navbar>
		<!--课程详情-->
		<view class='content'>
			<view class='content-title'>
				<view class="title-image" style="background-image:url('https://oss.xuexiluxian.cn/xiaoluxian-vcr/16999776aa234e1bb3a9529a597e6a9d.jpg');">
					<image src='../../static/common/vipLogo.png'></image>
				</view>
				<view class='title-content'>
					<view>
						<view class='right-title'>WEB前端算法</view>
						<view class='right-tips'>算法是面试大厂的敲门砖，并且是提升技术的必经之路，课程涵盖内容包含：各种数据结构，常用算法，其中涵盖大厂面试题等。</view>
					</view>
					<view class='right-member'>会员专享￥199.00</view>
				</view>
			</view>
			<view class='content-foot'>
				<view  
					class='item' 
					v-for='(item,index) in courseNav' 
					:key='item.id'
					@click='tabCourse(item)'
					:class='item.id == current?"active":""'
				>
					{{ item.name }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default{
	data () {
		return {
			courseNav:[
				{id:0,name:'目录'},
				{id:1,name:'下载笔记代码'}
			],
			current:0,
		}
	},
	methods:{
		tabCourse( item ){
			this.current = item.id;
		}
	}
}
</script>

<style scoped lang='scss'>
.details{
	display: flex;
	flex-direction: column;
	width:100vw;
	height: 100vh;
	overflow: hidden;
}
/deep/ .u-navbar__content{
	border-bottom:1px solid #f5f5f5;
}
.left-arrow{
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left:10rpx;
	image{
		width:18rpx;
		height: 33rpx;
	}
}
.right-content{
	display: flex;
	align-items: center;
	justify-content: space-between;
	image{
		width: 35rpx;
		height: 35rpx;
		padding-right:10rpx;
	}
	.title-start{
		margin-right: 20rpx;
	}
}
.content{
	display: flex;
	flex-direction: column;
	.content-title{
		display: flex;
		justify-content: space-between;
		margin-top:30rpx;
		padding:0 30rpx;
		.title-image{
			position: relative;
			width: 300rpx;
			height: 186rpx;
			border-radius: 5px;
			background-position: 0 0;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			image{
				position: absolute;
				right:0;
				top:0;
				width: 52rpx;
				height: 22rpx;
			}
		}
	}
	.title-content{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex:1;
		padding-left:16rpx;
		.right-title{
			font-size: 32rpx;
			font-weight: 400;
			color: #191919;
		}
		.right-tips{
			font-size: 24rpx;
			height: 30px;
			font-weight: 400;
			color: #c5c5c5;
			margin-top: 8rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
		.right-member{
			font-size: 24rpx;
			font-weight: 700;
			color: #ff0018;
		}
	}
	.content-foot{
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 60rpx;
		margin-top:14rpx;
		.item{
			font-size:28rpx;
			color: #303133;
			position: relative;
			&.active::after{
				content: '';
				position: absolute;
				left:0;
				bottom:-20rpx;
				background-color: #0445ff;
				width: 100%;
				height: 4px;
				border-radius: 2px;
			}
		}
	}
}
</style>